<template>
  <el-dialog v-if="load" :close-on-click-modal="false" :title="form.label_id ? '编辑标签' : '添加标签'" v-model="visible" append-to-body width="500px"
    @close="handleClose">
    <el-form ref="formRef" :model="form" label-position="top">
      <el-form-item label="标签名称" prop="name" :error="errorMsg" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
        <el-input v-model="form.name" placeholder="请输入" class="w-full" @change="errorMsg = ''" />
      </el-form-item>
      <el-form-item label="标签颜色" prop="value" :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
        <el-radio-group v-model="form.value" class="label-color">
          <el-radio v-for="(d, i) in colors" :key="i" :label="d" class="m-0">
            <div class="relative w-5 h-5">
              <div v-if="form.value === d" class="absolute w-5 h-5 rounded-xl inset-0 z-0" :style="{ backgroundColor: '#3487FF' }"></div>
              <div class="absolute w-4 h-4 rounded-xl border border-white" style="left: 2px;top:2px" :style="{ backgroundColor: d }"></div>
            </div>
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" :loading="loadings.create" @click="create(formRef)">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from '../api'
import { ElMessage } from 'element-plus'
const props = defineProps({
  lt_id: { type: Number, default: 0 },
})

const load = ref(false)
const visible = ref(false)
const success = ref(false)
let loadings = reactive({})
const form = ref({})
const formRef = ref()
const errorMsg = ref('')
const colors = ['#9C9C9C', '#5A8BF0', '#E76A5D', '#EBA65D', '#7DCC6F', '#51BFE1', '#A972CF']

const emit = defineEmits(['close', 'success'])

// 打开弹窗
const open = async (label_id) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  if (label_id) {
    const res = await api.detail({ label_id })
    form.value = res.data
    formRef?.value?.clearValidate()
  } else {
    form.value = {value: colors[0]}
    formRef?.value?.resetFields()
  }
  const {lt_id} = props
  form.value.lt_id = lt_id
  loadings = reactive({})
  success.value = false
  errorMsg.value = ''
  visible.value = true
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
  if(success.value) emit('success')
}
// 提交
const create = async (formRef) => {
  const validator = await formRef.validate()
  if (!validator) return
  loadings.create = true
  api[form.value.label_id ? 'edit' : 'create'](form.value).then(res => {
    const {code, message} = res
    if(code === 200) {
      ElMessage.success('操作成功')
      success.value = true
      emit('success')
      close()
    } else {
      errorMsg.value = message
    }
  }).finally(() => {
    loadings.create = false
  })
}

defineExpose({ open })
</script>

<style lang="scss">
  .label-color{
    .el-radio__input{
      display: none!important;
    }
  }
</style>